<template>
  <van-popup v-model:show="curComp.config.isActive" round position="bottom">
    <van-picker
      :columns="columns"
      :columns-field-names="{ text: attrs.keyName, value: 'value', children: 'children' }"
      :title="attrs.title"
      :confirm-button-text="attrs.confirmText"
      :cancel-button-text="attrs.cancelText"
      :show-toolbar="attrs.showToolbar"
      :option-height="attrs.itemHeight"
      :visible-option-num="attrs.visibleItemCount"
      @confirm="curComp.config.isActive = false"
      @cancel="curComp.config.isActive = false"
    />
  </van-popup>
</template>
<script setup lang='ts'>
import { useAttrs } from 'generator/hooks'
import { computed } from 'vue';

const props = defineProps<{
  panelJson: TPanel
  curComp: TComp
}>()

const attrs = useAttrs(props.curComp.attrs)

const columns = computed(() => {
  if(!attrs.value.columns) return getDefCols()
  const filed = attrs.value.columns
  const columnsInfo = props.panelJson.data.find(item => item.variable == filed)
  const modelData = columnsInfo?.value
  return modelData || getDefCols()
})

function getDefCols() {
  return [
    { text: '杭州', value: 'Hangzhou' },
    { text: '宁波', value: 'Ningbo' },
    { text: '温州', value: 'Wenzhou' },
    { text: '绍兴', value: 'Shaoxing' },
    { text: '湖州', value: 'Huzhou' },
  ]
}
</script>
<style scoped>
.wft-w-h-100 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>